<template>
  <div class="content">
      <header>
        <img src="../../assets/life/banner5.png" alt="">
        <div class="title" @click="goService">
          <i class="iconfont icon-zuojiantou" style="font-size:1rem; color:#ffffff"></i>
        </div>
      </header>
      <van-row type="flex" style="padding-top:10px">
  <van-col span="1"></van-col>
  <van-col span="3" style="color:#ff5555;border:1px solid #ff5555; border-radius:8px; text-align: center;">优惠</van-col>
  <van-col span="8" style="text-align: center;">首次充值充100送200</van-col>
  <van-col span="7"></van-col>
  <van-col span="5">立即充值<van-icon name="arrow" color="#fd6262"/></van-col>
      </van-row>
      <div class="middle">
      <div class="main" v-for="(item,index) in list" :key="index">
        <div class="img">
          <img :src="item.showImg" alt="">
        </div>
        <div class="word">
          <h4>{{item.name}}</h4>
          <p>{{item.describe}}</p>
          <div class="price">{{item.starting_price}}元起</div>
        </div>
      </div>
      </div>
  </div>
</template>

<script>
import { getClean } from "../../api/index"
// let navlist =[{
//   path:'https://img01.yzcdn.cn/vant/cat.jpeg',
//   title1:'宜居保洁',
//   title2:'您的专享周期保洁',
//   price:'0元起'
// },
// {
//   path:'https://img01.yzcdn.cn/vant/cat.jpeg',
//   title1:'日常保洁',
//   title2:'室内表面清洁，物品归纳整理服务',
//   price:'50元起'
// },
// {
// path:'https://img01.yzcdn.cn/vant/cat.jpeg',
//   title1:'专业除螨',
//   title2:'对床铺、沙发、地毯、窗帘等家具提供除螨服务',
//   price:'150元起'
// },
// {
//   path:'https://img01.yzcdn.cn/vant/cat.jpeg',
//   title1:'檫玻璃',
//   title2:'您的专享周期保洁',
//   price:'30元起'
// }]
export default {
  data(){
    return{
      list:[
      ]
    }
  },
  mounted(){
    // this.list = navlist;
    this.getCleaning()
  },
  methods:{
    goService(){
         this.$router.push({path: "/service"})
       },
    async getCleaning(){
      let {data,meta:{status}} = await getClean()
      this.list = data;
    }
  }
}
</script>
<style lang="less" scoped>
body{
  background: #e6e6e6;
}
.van-col{
    font-size: 0.3rem;
    height: 0.5rem;
    line-height: 0.5rem;
    color:#929292;
}
header{
  width: 100%;
  height: 446px;
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
  .title{
    width: 10%;
    position: fixed;
    top: 0.6rem;
    left: 5px;
    opacity: 0.6;
  }
}
.content {
  min-height: 1334px;
  background-color: #e6e6e6;
}
.van-row {
  padding-bottom: 25px;
  background-color: #e6e6e6;
}
.middle{
  padding: 0 10px;
  background: #e6e6e6;
}
.main{
  border-radius: 5px;
  width: 100%;
  height:178px ;
  background-color: #fff;
  &:not(:nth-child(1)) {
    margin-top: 25px;
  }
  display: flex;
  align-items: center;

  flex: 1;
  .img{
    width: 30%;
    height:138px;
    padding: 20px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .word{
    width: 60%;
    padding-top: 15px;
    padding-left: 10px;
    h4{
      font-size: 15px;
      color: #000000;
      opacity: 0.8;
      margin:0 ;
    }
    p{
      font-size: 10px;
      color: #000000;
      opacity: 0.7;
      margin: 0;
    }
    .price{
      font-size: 13px;
      color: #ff5555;
      opacity: 1;
      text-align: right;
      margin-top: 20px;
    }
  }
}
</style>